<template>
    <div v-loading="loading">
        <el-card >
            <template #header>
                <div>问卷-{{ paper.papername }}</div>
            </template>
            <el-card 
                v-for="(outline, index) in paper.outlines" 
                :key="outline._id"
                style="margin-bottom: 10px"
            >
                <template #header>
                    <div>{{ index + 1 }} 、{{ outline.outlinename }}</div>
                </template>
                <el-radio-group v-model="outline.answer">
                    <el-radio 
                        v-for="item in paper.items" 
                        :key="item._id" 
                        :label="item.itemname"
                    >
                        {{ item.itemname }}
                    </el-radio>
                </el-radio-group>
            </el-card>
        </el-card>

        <!-- 提交按钮 -->
        <p>
            <el-button type="primary" @click="addAnswerLoading">提交</el-button>
        </p>
    </div>
</template>
<script>
import items from '@/store/modules/items';
import { mapActions } from 'vuex';

export default {
    props:["id"],
    data(){
        return{
            loading:false,
            paper:{},
        }
    },
    async created(){
        await this.getPaperLoading();
    },
    methods:{
        ...mapActions('papers',['getPaper']),
        ...mapActions('answers',['addAnswer']),
        // 添加答卷
        async addAnswerLoading(){
            const outlines = this.paper.outlines
            for (let i = 0; i < outlines.length; i++) {
                if (!outlines[i].answer) {
                    this.$message.error(`第${i+1}题未作答`);
                    return;
                }
            }
            this.loading=true;
            try {
                await this.addAnswer({
                    paperId:this.id,
                    outlines:this.paper.outlines,
                    items:this.paper.items,
                });
                this.$router.push({name:'AnswersIndex',params:{id:this.id}});
            } catch (error) {}
            this.loading=false;
        },

        async getPaperLoading(){
            this.loading=true;
            try {
                const {data} = await this.getPaper(this.id);
                this.paper=data;
            } catch (error) {}
            this.loading=false;
        }
    }
}
</script>